<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 300px;
            height: 200px;
            background-color: yellow;
        }

        /* 样式的优先级
        
        id > class > 标签
        
        手动提升优先级 important
        
        */
        .box{
            background-color: black !important;  
        }


    </style>
</head>
<body>
    <div id="box">

    </div>
    <script>
        // css dom
        // document.getElementById("box").style.width = "300px";
        // document.getElementById("box").style.height = "200px";
        // document.getElementById("box").style.backgroundColor = "red";

        var box_ = document.getElementById("box");
        // box_.style.width = "300px";
        // box_.style.height = "200px";
        // box_.style.backgroundColor = "blue";
        // box_.style.display = "none";

        box_.className = "box";



    </script>
</body>
</html>